<template>
	<view>
		<scroll-view scroll-x="true" style="white-space: nowrap; height: 100rpx" :scroll-into-view="tarId" scroll-with-animation="true">
			<view class="flex justify-around align-center">
				<view
					class="mr-3 mb-2 d-inline-block"
					v-for="(item, index) in scollList"
					:key="index"
					:id="'tar' + index"
					:class="tarindex === index ? 'text-main font-lg' : ''"
					@click="selct(index)"
				>
					{{ item.classname }}
				</view>
			</view>
		</scroll-view>

		<!-- :current="tarindex" 与上方导航栏的索引对应，点击导航栏滑动到对应的swiper -->
		<swiper :current="tarindex" @change="swiperchange" :style="{ height: height + 'px' }">
			<swiper-item v-for="(item, index) in newlist" :key="index">
				<view v-if="item.list.length !== 0">
					<scroll-view scroll-y :style="{ height: height + 'px' }" @scrolltolower="loadmore(index)">
						<block v-for="(item2, index2) in item.list" :key="index2">
							<view class="">
								<list :item="item2" :index="index2" :isDetail="true" :userId="userId" :isSpace="true"></list>
								<divider></divider>
							</view>
						</block>
						<loadmore v-if="item.list.length > 3" :loadmore="item.loadmore"></loadmore>
					</scroll-view>
				</view>

				<view class="" v-else-if="!item.isloading"></view>
				<!-- 没数据时显示的图片 -->
				<view v-else>
					<noThing></noThing>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import { watch } from 'vue';
import list from '../../compoment/IndexCommen/list.vue';
import { getList, getPostList } from '@/request/Api/post.js';
export default {
	data() {
		return {
			height: 600,
			newlist: [],
			scollList: [],
			tarindex: 0,
			tarId: 'tar' + 0,
			userId: 0
		};
	},
	onNavigationBarSearchInputClicked() {
		uni.navigateTo({
			url: '/pages/search/search?type=帖子'
		});
	},
	//监听用户点击导航栏的按钮事件
	onNavigationBarButtonTap(e) {
		if (e.index === 0) {
			uni.navigateTo({
				url: '/pages/publish/publish'
			});
		}
	},

	components: {
		list
	},
	onLoad() {
		const userinfo = uni.getStorageSync('userInfo');
		this.userId = userinfo.id;
		getList().then((res) => {
			this.scollList = res.data;
			this.getdata(this.scollList);
		});
		// 这里获取的是去掉标题剩余的屏幕的高度,windowHeight高度不包括tarber和状态栏
		uni.getSystemInfo({
			success: (res) => {
				this.width = res.windowWidth;
				this.height = res.windowHeight - uni.upx2px(100);
			}
		});
		uni.$on('followOrdosupport', (res) => {
			if (res.type === 'follow') {
				this.newlist.forEach((item) => {
					item.list.forEach((v) => {
						console.log(v.userId)
						if (v.userId ===parseInt(res.userId)) {
							v.isFollow = res.num;
						}
					});
				});
			}
			if (res.type === 'dosupport') {
				this.dosupport({ num: res.num, id: res.id });
			}
		});
		uni.$on('commentCount', (res) => {
			this.newlist.forEach((v) => {
				v.list.forEach((item1) => {
					if (item1.id === res.id) {
						item1.commentCount = res.num;
					}
				});
			});
		});
	},

	methods: {
		loadmore(index) {
			let item = this.newlist[index];
			// 这里应该判断一下，不能让用户一直上拉加载，这样服务器的压力很大
			if (item.loadmore !== '上拉加载更多') return;
			item.loadmore = '加载中';
			getPostList({
				id: this.scollList[index].id,
				current: item.page
			}).then((res) => {
				const list = res.data.map((v) => {
					return {
						id: v.id,
						userId: v.userId,
						userpic: v.user.userpic,
						nikeName: v.user.nikeName,
						createTime: v.createTime,
						isFollow: v.isFollow,
						title: v.title,
						titlepic: v.titlepic,
						supportVo: v.supportVo,
						commentCount: v.commentCount,
						sharenum: v.sharenum
					};
				});
				item.list = [...item.list, ...list];
				if (res.data.length < 5) {
					item.loadmore = '没有更多数据了';
				} else {
					item.page++;
					item.loadmore = '上拉加载更多';
				}
			});
		},
		//获取每个导航栏的数据并给一个数组
		getdata(list1) {
			for (let i = 0; i < list1.length; i++) {
				let obj = {
					loadmore: '上拉加载更多',
					list: [],
					page: 1,
					isloading: false
				};
				this.newlist.push(obj);
			}

			getPostList({
				id: this.scollList[0].id,
				current: this.newlist[0].page,
				UserId: this.userId
			}).then((res) => {
				console.log(res.data)
				this.newlist[0].list = res.data.map((v) => {
					return { 
						id: v.id,
						userId: v.userId,
						userpic: v.user.userpic,
						nikeName: v.user.nikeName,
						createTime: v.createTime,
						isFollow: v.isFollow,
						title: v.title,
						titlepic: v.titlepic,
						supportVo: v.supportVo,
						commentCount: v.commentCount,
						sharenum: v.sharenum
					};
				});
				console.log(this.newlist[0].list);
				this.newlist[0].page++;
				this.newlist[0].isloading = true;
			});
		},
		onUnload() {
			uni.$off('followOrdosupport', (res) => {});
			uni.$off('commentCount', (res) => {});
		},
		//顶踩
		dosupport(e) {
			let item = '';
			this.newlist.forEach((v) => {
				v.list.forEach((item1) => {
					if (item1.id === e.id) {
						item = item1;
					}
				});
			});

			let msg = e.num === 1 ? '顶' : '踩';
			if (item.supportVo.userSupportType === e.num) {
				uni.showToast({
					title: '你已经' + msg + '过了',
					mask: true
				});
				return;
			}
			// 如果没有顶踩过，就直接++
			if (item.supportVo.userSupportType === null) {
				if (e.num === 1) {
					item.supportVo.support++;
				} else {
					item.supportVo.unSupportCount++;
				}
			}
			//如果顶过，现在又是踩
			else if (item.supportVo.userSupportType === 1 && e.num === 0) {
				item.supportVo.support--;
				item.supportVo.unSupportCount++;
			}
			//如果踩过，现在要顶
			else if (item.supportVo.userSupportType === 0 && e.num === 1) {
				item.supportVo.support++;
				item.supportVo.unSupportCount--;
			}
			item.supportVo.userSupportType = e.num;
			uni.showToast({
				title: msg,
				mask: true
			});
		},

		//点击导航栏，跳转到对应的内容
		selct(index) {
			this.tarindex = index;
			this.tarId = 'tar' + index;
		},
		//滑动下面的页面相应改变导航栏
		swiperchange(e) {
			this.selct(e.detail.current);
			if (this.newlist[e.detail.current].isloading) return;
			getPostList({
				id: this.scollList[e.detail.current].id,
				current: this.newlist[e.detail.current].page,
				UserId: this.userId
			}).then((res) => {
				this.newlist[e.detail.current].list = res.data.map((v) => {
					return {
						id: v.id,
						userId: v.userId,
						userpic: v.user.userpic,
						nikeName: v.user.nikeName,
						createTime: v.createTime,
						isFollow: v.isFollow,
						title: v.title,
						titlepic: v.titlepic,
						supportVo: v.supportVo,
						commentCount: v.commentCount,
						sharenum: v.sharenum
					};
				});
				this.newlist[e.detail.current].page++;
				this.newlist[e.detail.current].isloading = true;
			});
		}
	}
};
</script>

<style>
page {
	box-sizing: border-box;
}
</style>
<!-- {
					loadmore: '上拉加载更多',
					list: [
						{
							userpic: '',
							nikeName: '',
							createTime: '',
							isFollow: 0,
							title: '',
							titlepic: '',
							supportVo: {
								userSupportType: '',
								support: 0,
								unSupportCount: 0
							},
							commentCount: 0,
							sharenum: 0
						}
					]
				} -->